<template>
  <!--注册-->
  <div>
    <carousel :autoplaySpeed="autoplaySpeed" :Img="Img"></carousel>
    <div class="login">
      <Row>
        <i-col :span="15" style="border-right: 1px solid #ccc">
          <div class="user">
            <h2 class="h">用户注册</h2>
            <p class="p p1">
              <span class="spa">用户名：</span>
              <Input v-model="user" @on-blur="users" type="text" placeholder="输入用户名" style="width: auto"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong" style="font-weight: bold;color: red" type="md-close"/>
              </span>
              <span class="spa1">* 6-20个字符，可由字母数字组合</span>
            </p>
            <p class="p p2">
              <span class="spa">密码：</span>
              <Input v-model="password" @on-blur="passwords" type="password" placeholder="输入密码" style="width: auto"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right1" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong1" style="font-weight: bold;color: red" type="md-close"/>
              </span>
              <span class="spa1">* 6-20个字符，可由字母数字组合</span>
            </p>
            <p class="p p2">
              <span class="spa">确认密码：</span>
              <Input v-model="ConPassword" @on-blur="ConPasswords" type="password" placeholder="输入确认密码"
                     style="width: auto"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right2" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong2" style="font-weight: bold;color: red" type="md-close"/>
              </span>
              <span class="spa1">* 再一次输入密码，两次密码请保持一致</span>
            </p>
            <p class="p p2">
              <span class="spa">手机号：</span>
              <Input v-model="Mobile" @on-blur="Mobiles" type="text" placeholder="输入手机号" style="width: auto"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right3" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong3" style="font-weight: bold;color: red" type="md-close"/>
              </span>
              <span v-show="sendAuthCode" class="spa1"><Button type="primary" @click="gain">获取手机验证码</Button></span>
              <span v-show="!sendAuthCode" class="spa1"><Button type="primary">{{auth_time}}秒之重新获取</Button></span>
            </p>
            <p class="p p2">
              <span class="spa">验证码：</span>
              <Input v-model="code" @on-blur="codes" type="text" placeholder="输入验证码" style="width: auto"/>
              <span style="width: 20px;display: inline-block">
                  <Icon v-show="right4" style="font-weight: bold;color: #00a050" type="md-checkmark"/>
                  <Icon v-show="wrong4" style="font-weight: bold;color: red" type="md-close"/>
              </span>
              <span class="spa1">* 请输入收到的验证码</span>
            </p>
            <p>
              <RadioGroup v-model="multipleChoice" class="multipleChoice">
                <Radio label="我是读者"></Radio>
                <Radio label="我是编辑"></Radio>
              </RadioGroup>
            </p>
            <p class="p p2">
              <Checkbox class="Checkbox" v-model="checkbox">阅读并接受 <a target="_blank"
                                                                     href="https://www.baidu.com/duty/yinsiquan.html">《用户协议》</a>及
                <a target="_blank"
                   href="https://passport.baidu.com/static/passpc-account/html/protocal.html">《隐私权保护声明》</a></Checkbox>
            </p>
            <p class="p p4">
              <Button type="primary" icon="ios-contact" @click="Register">用户注册</Button>
            </p>
          </div>
        </i-col>
        <i-col :span="9">
          <div class="register">
            <p class="p">如果您已经是会员，请直接登录</p>
            <p class="p">
              <router-link to="/login">
                <Button type="primary" icon="ios-unlock">用户登录</Button>
              </router-link>
            </p>
            <p class="p">忘记密码？</p>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
  import carousel from '../module/carousel'

  export default {
    components: {
      carousel
    },
    data() {
      return {
        URL: this.$api.url,
        single: false,
        checkbox: true,
        Img: [
          {
            id: 1,
            imageLocation: require('../../assets/img/u69.jpg'),
            state: true,
            uri: '',
          },
        ],
        autoplaySpeed: 100000,
        sendAuthCode: true,
        auth_time: 0,
        /*对错显示*/
        right: false,
        wrong: false,
        right1: false,
        wrong1: false,
        right2: false,
        wrong2: false,
        right3: false,
        wrong3: false,
        right4: false,
        wrong4: false,
        /*用户注册*/
        user: '',
        password: '',
        ConPassword: '',
        Mobile: '',
        code: '',

        multipleChoice: '我是读者',
      }
    },
    methods: {
      /*用户名*/
      users() {
        if (this.user != '') {
          if (this.user.length >= 6 && this.user.length <= 20) {
            this.$axios.get(this.URL + '/user/verify/name/' + this.user).then((res) => {
              if (res.data == true) {
                this.right = true;
                this.wrong = false;
              } else {
                this.right = false;
                this.wrong = true;
              }
            });
          } else {
            this.wrong = true;
            this.right = false;
          }
        } else {
          this.wrong = false;
          this.right = false;
        }
      },
      /*密码*/
      passwords() {
        if (this.password != '') {
          this.wrong1 = true;
          if (this.password.length >= 6 && this.password.length <= 20) {
            this.right1 = true;
            this.wrong1 = false;
          } else {
            this.right1 = false;
            this.wrong1 = true;
          }
        } else {
          this.right1 = false;
          this.wrong1 = false;
        }
      },
      /*确认密码*/
      ConPasswords() {
        if (this.ConPassword != '') {
          this.wrong2 = true;
          if (this.ConPassword == this.password) {
            this.right2 = true;
            this.wrong2 = false;
          } else {
            this.right2 = false;
            this.wrong2 = true;
          }
        } else {
          this.right2 = false;
          this.wrong2 = false;
        }
      },
      /*手机号*/
      Mobiles() {
        if (this.Mobile != '') {
          if (this.Mobile.length == 11) {
            let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
            if (reg.test(this.Mobile)) {
              this.$axios.get(this.URL + '/user/verify/phone/' + this.Mobile).then((res) => {
                if (res.data == true) {
                  this.right3 = true;
                  this.wrong3 = false;
                } else {
                  this.right3 = false;
                  this.wrong3 = true;
                }
              });
            } else {
              this.right3 = false;
              this.wrong3 = true;
            }
          } else {
            this.right3 = false;
            this.wrong3 = true;
          }
        } else {
          this.wrong3 = false;
          this.right3 = false;
        }
      },
      /*验证码*/
      codes() {
        if (this.code != '') {
          if (this.code.length == 6) {
            this.$axios.get(this.URL + '/user/verify/auth/code/' + this.Mobile + '/' + this.code, {withCredentials: true}).then((res) => {
              if (res.data.code == 200) {
                this.right4 = true;
                this.wrong4 = false;
              } else {
                this.right4 = false;
                this.wrong4 = true;
              }
            });
          } else {
            this.wrong4 = true;
          }
        } else {
          this.wrong4 = false;
        }
      },
      /*获取手机验证码*/
      gain() {
        if (this.Mobile.length == 11) {
          this.sendAuthCode = false;
          this.auth_time = 60;
          let auth_timetimer = setInterval(() => {
            this.auth_time--;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(auth_timetimer);
            }
          }, 1000);
          this.$axios.get(this.URL + '/user/get/auth/register/code/' + this.Mobile, {withCredentials: true}).then((res) => {
            if (res.data.code == 200) {
            }
          });
        } else {
          this.wrong3 = true;
        }
      },
      /*注册用户*/
      Register() {
        if (this.right == true) {
          if (this.right1 == true) {
            if (this.right2 == true) {
              if (this.right3 == true) {
                if (this.right4 == true) {
                  this.$axios({
                    method: 'POST',
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    data: JSON.stringify({
                      name: this.user,
                      pwd: this.password,
                      phone: this.Mobile,
                    }),
                    url: this.URL + '/user/add/user',
                  }).then((res) => {
                    if (res.data == true) {
                      this.$Message.error('注册成功!');
                      this.$router.push('/login');
                      setTimeout(() => {
                        this.$router.go(0);
                      }, 100);
                    }
                  })
                } else {
                  this.wrong4 = true;
                }
              } else {
                this.wrong3 = true;
              }
            } else {
              this.wrong2 = true;
            }
          } else {
            this.wrong1 = true;
          }
        } else {
          this.wrong = true;
        }
      },
      GET(url, data) {
        this.$axios.get(url + data).then((res) => {
          if (res.data == true) {

          }
        });
      }
    }
  }
</script>

<style scoped>
  .login {
    padding: 50px 0;
  }

  .login .user {
    padding-left: 15%;
  }

  .login .user .h {
    margin-bottom: 10px;
  }

  .login .user .p, .login .register .p {
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px;
  }

  .login .user .p .spa {
    display: inline-block;
    width: 85px;
  }

  .login .user .p .spa1 {
    display: inline-block;
    padding-left: 10px;
  }

  .login .user .h, .login .user .p3 .ivu-checkbox-wrapper, .login .user .p4 .ivu-btn {
    margin-left: 85px;
  }

  .login .register {
    margin-left: 150px;
    margin-top: 110px;
  }

  .ivu-btn-primary {
    background-color: #2b369f;
    border-color: #2b369f;
  }
</style>
